<!-- 设备类型 -->
<template>
  <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
    <template #buts>
      <a-button type="primary" @click="addItem()">
        <template #icon>
          <icon-plus></icon-plus>
        </template>
        <template #default>新建主类型</template>
      </a-button></template
    ></pageHeader
  >
  <div class="content">
    <div class="content-header">
      <a-space>
        <div>
          <a-input
            :style="{ width: '320px' }"
            placeholder="请输入类型名称"
            allow-clear
            v-model="searchVal"
          >
          </a-input>
        </div>
        <a-space>
          <div>
            <a-button type="primary">
              <template #icon>
                <icon-search />
              </template>
              <template #default>搜索</template>
            </a-button>
          </div>

          <div>
            <a-button type="outline" @click="reset">
              <template #icon>
                <icon-refresh />
              </template>
              <template #default>重置</template>
            </a-button>
          </div>
        </a-space></a-space
      >
      <!-- <div
        :style="{
          marginLeft: '20px',
        }"
      >
        <span>是否启用：</span>
        <a-select :style="{ width: '200px' }" placeholder="请选择是或否">
          <a-option :value="1">是</a-option>
          <a-option :value="2">否</a-option>
        </a-select>
      </div> -->
    </div>
    <div>
      <TableTurn ref="tableTurnRef" :args="args" :table-data="getData">
        <a-table-column
          title="类型名称"
          align="center"
          data-index="name"
        ></a-table-column>
        <a-table-column
          title="设备类型编码"
          align="center"
          data-index="code"
        ></a-table-column>
        <a-table-column title="是否启用" align="center" data-index="isEnable">
          <template #cell="{ record }">
            <div :class="record.isEnable === 1 ? 'stateUse' : 'stateFault'">
              {{ `${record.isEnable === 1 ? '是' : '否'}` }}
            </div>
          </template>
        </a-table-column>
        <a-table-column
          title="备注"
          align="center"
          data-index="remark"
        ></a-table-column>
        <a-table-column align="center" :width="150" fixed="right" title="操作">
          <template #cell="{ record }">
            <a-tooltip content="新增">
              <IconFont
                type="icon-add-def"
                :size="26"
                :style="{
                  marginRight: '10px',
                  cursor: 'pointer',
                }"
                @click="addItem(record)"
              />
            </a-tooltip>
            <a-tooltip content="编辑">
              <IconFont
                type="icon-edit"
                :size="26"
                :style="{
                  marginRight: '10px',
                  cursor: 'pointer',
                }"
                @click="goEdit(record)"
              />
            </a-tooltip>

            <a-tooltip content="删除">
              <a-popconfirm
                content="确认删除？"
                type="error"
                @ok="deleteItem(record.id)"
              >
                <IconFont
                  type="icon-delete"
                  :size="26"
                  :style="{
                    marginRight: '10px',
                    cursor: 'pointer',
                  }"
                />
              </a-popconfirm>
            </a-tooltip>
          </template>
        </a-table-column>
      </TableTurn>
    </div>
    <modal
      v-model:visible="modalVisible"
      @addTypeEmit="addTypeEmit"
      @cancelaaa="cancel"
      :form="currForm"
      :fatherName="fatherName"
      :type="modalType"
    ></modal>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import {
    GetEquipmentType,
    PostEquipmentType,
    PutEquipmentType,
    DelEquipmentType,
  } from '@/api/equipment-management/base-setting';
  import clonedeep from 'lodash.clonedeep';
  import { flatTree } from '@/utils/utils';
  import modal from './components/add-modal/index.vue';

  const title: string = '设备类型';
  const breadCrumb: string[] = ['设备管理', '基础设置', '设备类型'];

  // 表格配置
  const args = reactive({
    stripe: true,
    bordered: {
      headerCell: true,
    },
    rowKey: 'code',
  });

  let tableTurnRef = ref(); // 储存table的ref

  // 储存扁平化的树状结构
  let flatData: any = [];

  // 获取表格数据
  const getData = async () => {
    try {
      const res = await GetEquipmentType();
      return Promise.resolve(res);
    } catch (err: unknown) {
      console.log(err);
    }
  };

  let modalVisible = ref(false); // 判断弹出框是否显示
  let currForm = ref({
    remark: '',
    name: '',
    isEnable: 1,
    code: '',
    pid: 0,
  });
  let modalType = ref('main'); // 判断弹出框是显示主类型还是子类型

  let searchVal = ref(''); // 搜索框

  let fatherName = ref(''); // 储存父级类型

  const addItem = (record?: any) => {
    if (record) {
      fatherName.value = record.name;
      modalType.value = 'child';
      currForm.value.pid = record.id;
    } else {
      modalType.value = 'main';
    }

    modalVisible.value = true;
  };

  // 编辑类型
  const goEdit = (record: any) => {
    currForm.value = record;
    modalType.value = 'edit';
    modalVisible.value = true;
  };

  const addTypeEmit = async (form: any) => {
    try {
      if (form.id) {
        await PutEquipmentType(form);
      } else {
        await PostEquipmentType(form);
      }
      if (form?.pid) fatherName.value = '';
      currForm.value = {
        remark: '',
        name: '',
        isEnable: 1,
        code: '',
        pid: 0,
      };
      tableTurnRef.value.loadData();
    } catch (err: unknown) {
      console.log(err);
    }
  };

  // 重置搜索框内容
  const reset = () => {
    searchVal.value = '';
  };

  // 删除一项
  const deleteItem = async (id: number) => {
    try {
      await DelEquipmentType({ id });
      tableTurnRef.value.loadData();
    } catch (err: unknown) {
      console.log(err);
    }
  };
  const cancel = () => {
    currForm.value = {
      remark: '',
      name: '',
      isEnable: 1,
      code: '',
      pid: 0,
    };
  };
</script>

<style scoped lang="less">
  .content {
    padding: 10px;

    &-header {
      display: flex;
      width: 100%;
      margin-bottom: 10px;
      :deep(.arco-btn-secondary) {
        color: #165dff;
      }
      :deep(.arco-input-prepend) {
        background-color: #165dff;
        color: #fff;
      }
    }

    .stateUse,
    .stateFault {
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 40px;
      line-height: 40px;
    }

    .stateUse {
      background-color: #e8f3ff;
      color: #3d7eff;
      border: 1px solid #3d7eff;
    }

    .stateFault {
      background-color: #ffece8;
      color: #f53f3f;
      border: 1px solid #f53f3f;
    }
  }
</style>
